<template>
	<view class="container">
		<view class="list">
			<router-link class="item flex justify-between align-center" to="/pages/modifyPassword/modifyPassword">
				<text class="label">修改密码</text>
				<u-icon name="arrow-right" size="34" color="#CCCCCC"></u-icon>
			</router-link>
			<router-link class="item flex justify-between align-center" to="/pages/colorChange/colorChange">
				<text class="label">显示设置</text>
				<text class="value">{{getColorUp=="red"?'红涨绿跌':'绿涨红跌'}}</text>
				<u-icon name="arrow-right" size="34" color="#CCCCCC"></u-icon>
			</router-link>
		</view>
		<view class="logout-btn" @tap="exit">退出登录</view>
	</view>
</template>

<script>
	import {mapMutations,mapGetters} from "vuex"
	export default {
		data() {
			return {

			};
		},
		computed:{
			...mapGetters("user",["getColorUp"])
		},
		methods:{
			...mapMutations("user",["logout"]),
			exit(){
				this.logout()
				this.$Router.replace("/pages/login/login")
			}
		}
	}
</script>

<style lang="scss">
.container{
	padding-top: 20rpx;
	.list{
		background-color: #fff;
		.item{
			padding: 28rpx 24rpx;
			.label{
				font-size: 30rpx;
				color: #333333;
			}
			.value{
				margin-right: 10rpx;
				margin-left: auto;
				font-size: 30rpx;
				color: #333333;
			}
		}
	}
	.logout-btn{
		margin: 60rpx 30rpx;
		height: 98rpx;
		background: #FFFFFF;
		border-radius: 49rpx;
		border: 2rpx solid #EBEBEB;
		font-size: 32rpx;
		line-height: 98rpx;
		text-align: center;
	}
}
</style>
